import React from 'react';
import './App.css';

function App() {
  return (
    <section className="todoapp">
     			<header className="header">
				<h1>待办事项</h1>
				{/* <input className="new-todo" placeholder="What needs to be done?" autofocus /> */}
				<input className="new-todo" placeholder="需要做什么?"  />
			</header>
			{/* <!-- This section should be hidden by default and shown when there are todos --> */}
			<section className="main">
				<input id="toggle-all" className="toggle-all" type="checkbox" />
				<label htmlFor="toggle-all">Mark all as complete</label>
				<ul className="todo-list">
					{/* <!-- These are here just to show the structure of the list items --> */}
					{/* <!-- List items should get the className `editing` when editing and `completed` when marked as completed --> */}
					<li className="completed">
						<div className="view">
							{/* <input className="toggle" type="checkbox" checked /> */}
							<input className="toggle" type="checkbox"  />
							<label>Taste JavaScript</label>
							<button className="destroy"></button>
						</div>
						{/* <input className="edit" value="Create a TodoMVC template" /> */}
						<input className="edit"  />
					</li>
					<li>
						<div className="view">
							<input className="toggle" type="checkbox" />
							<label>Buy a unicorn</label>
							<button className="destroy"></button>
						</div>
						{/* <input className="edit" value="Rule the web" /> */}
						<input className="edit"  />
					</li>
				</ul>
			</section>
			{/* <!-- This footer should hidden by default and shown when there are todos --> */}
			<footer className="footer">
				{/* <!-- This should be `0 items left` by default --> */}
				<span className="todo-count"><strong>0</strong> 剩余</span>
				{/* <!-- Remove this if you don't implement routing --> */}
				<ul className="filters">
					<li>
						<a className="selected" href="#/">全部</a>
					</li>
					<li>
						<a href="#/active">未完成</a>
					</li>
					<li>
						<a href="#/completed">已完成</a>
					</li>
				</ul>
				{/* <!-- Hidden if no completed items are left ↓ --> */}
				<button className="clear-completed">清除已经完成的</button>
			</footer>
    </section>
  );
}

export default App;
